<template>
	<view class="main">
		<!--公共头部-->
		<my-header :background="background" title="业绩监控编辑"></my-header>

		<view class="main-body-e">
			<u-form :model="form" ref="uForm">
				<view class="dis_flex jus-cen mar-bot-10 _h1">成本占比设定</view>
				<!--年付商户-->
				<view class="dis_flex fle-flo hzms">
					<view class="hzms-auto">
						<u-form-item label-width="140" label="年付商户：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<view class="dis_flex ali-ite">
								<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name1"
									:clearable="false" :border="true" />
								<view class="mar-lef-10">%</view>
							</view>
						</u-form-item>
					</view>
				</view>
				<!--半年付商户-->
				<view class="dis_flex fle-flo hzms">
					<view class="hzms-auto">
						<u-form-item label-width="140" label="半年付商户：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<view class="dis_flex ali-ite">
								<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name1"
									:clearable="false" :border="true" />
								<view class="mar-lef-10">%</view>
							</view>
						</u-form-item>
					</view>
				</view>
				<!--季付商户-->
				<view class="dis_flex fle-flo hzms">
					<view class="hzms-auto">
						<u-form-item label-width="140" label="季付商户：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<view class="dis_flex ali-ite">
								<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name1"
									:clearable="false" :border="true" />
								<view class="mar-lef-10">%</view>
							</view>
						</u-form-item>
					</view>
				</view>
				<!--月付商户-->
				<view class="dis_flex fle-flo hzms">
					<view class="hzms-auto">
						<u-form-item label-width="140" label="月付商户：" prop="name" :left-icon-style="labSty"
							:label-style="labSty" :border-bottom="false">
							<view class="dis_flex ali-ite">
								<u-input placeholder=" " :custom-style="jinengStyle" v-model="form.name1"
									:clearable="false" :border="true" />
								<view class="mar-lef-10">%</view>
							</view>
						</u-form-item>
					</view>
				</view>
			</u-form>
			<view class="pos-rel" style="margin-top:70px;margin-bottom:30px;color:rgb(16, 16, 16);">
				<view class="pos-abs" style="color:red;left: -10px;">*</view>
				<view>根据不同的支付方式/支付周期和公司内部财务模型，设定可接受的成本占比。</view>
				<view class="pos-abs" style="color:red;left: -10px;">*</view>
				<view>后期实际运营中若实际成本占比高于该值，即投资回报率低于预期，表现不佳。若低于该值，说明投资回报率高于预期，表现优异。</view>
				<view class="pos-abs" style="color:red;left: -10px;">*</view>
				<view>该数据可为门店运维/定价/续约等数据参考。</view>
			</view>
			<view class="address" style="margin:30rpx 0 0rpx 0;">
				<button @click="cancel()" type="warn">取消</button>
				<button @click="submit()" style="background:#0051BA" type="primary">提交</button>
			</view>
			<view style="margin-top:20px;">
				<text style="color:red;">温馨提示：红色星为必填项，</text>
				<text style="color:#0051BA;">蓝色星为选填项</text>
			</view>
		</view>
	</view>
</template>

<script>
	import myHeader from '@/components/workbench/header.vue';
	export default {
		data() {
			return {
				background: {
					backgroundColor: '',
				},
				labSty: {
					color: 'rgba(0, 81, 186, 1)',
				},
			}
		},
		components: {
			myHeader,
		},
		methods: {
			// 取消事件
			cancel() {
				this.redirectTo('/pages/partner/details')
			},
		}
	}
</script>

<style>
	.address {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 10rpx;
	}

	.address button {
		font-size: 13px;
		width: 140px;
		border-radius: 20px;
	}

	.hzms-auto {
		width: 60%;
		margin: auto;
	}

	.hzms .u-input--border {
		height: 40rpx !important;
	}

	.hzms .u-input__input {
		min-height: 40rpx !important;
	}

	.hzms .u-form-item {
		padding: 0px !important;
	}
</style>
